﻿$(window).load(function () { $(".loading").fadeOut() })
$(function () {

    echarts_2()
    echarts_3()
    echarts_4()
    echarts_5()
    echarts_6()

    function echarts_2() {
        var myChart = echarts.init(document.getElementById('echart2'));

        var titlename = ['大肠杆菌', '金黄色葡萄球菌', '表皮芽孢杆菌', '沙门氏菌', '克罗诺杆菌', '李斯特菌', '志贺氏菌'];
        var standard_min = [100, 100, 100, 10, 50, 25, 10];
        var standard_max = [1000, 1000, 1000, 100, 500, 100, 100];
        var actual_data = [120, 850, 150, 15, 95, 80, 18];

        option = {
            grid: {
                left: '5%',
                top: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                name: '菌落数量(CFU/g)',
                nameTextStyle: {
                    color: '#fff'
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: titlename,
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            series: [
                {
                    name: '国标范围',
                    type: 'custom',
                    renderItem: function (params, api) {
                        var categoryIndex = api.value(0);
                        var min = api.value(1);
                        var max = api.value(2);

                        var start = api.coord([min, categoryIndex]);
                        var end = api.coord([max, categoryIndex]);
                        var height = api.size([0, 1])[1] * 0.6;

                        return {
                            type: 'rect',
                            shape: {
                                x: start[0],
                                y: start[1] - height / 2,
                                width: end[0] - start[0],
                                height: height
                            },
                            style: {
                                fill: 'rgba(255, 215, 0, 0.3)'
                            }
                        };
                    },
                    data: titlename.map(function (name, index) {
                        return [index, standard_min[index], standard_max[index]];
                    })
                },
                {
                    name: '实际检测值',
                    type: 'scatter',
                    data: actual_data.map(function (value, index) {
                        return {
                            value: [value, index],
                            itemStyle: {
                                color: value < standard_min[index] || value > standard_max[index]
                                    ? '#FD665F'
                                    : '#37a2da'
                            }
                        };
                    }),
                    symbolSize: 12,
                    label: {
                        show: true,
                        formatter: '{@[0]} CFU/g',
                        position: 'right',
                        color: '#fff'
                    }
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_3() {
        var myChart = echarts.init(document.getElementById('echart3'));

        // 定义警戒线值
        var generalWarningLine = 500; // CFU/g (通用警戒线)
        var salmonellaWarningLine = 50; // CFU/g (沙门氏菌专属警戒线)

        // 改进后的数据结构 - 7天数据
        var bacteriaData = {
            '大肠杆菌': {
                standard_min: [100, 100, 100, 100, 100, 100, 100],
                standard_max: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
                actual_data: [320, 380, 550, 210, 380, 290, 310]
            },
            '金黄色葡萄球菌': {
                standard_min: [100, 100, 100, 100, 100, 100, 100],
                standard_max: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
                actual_data: [400, 300, 350, 810, 200, 190, 300]
            },
            '表皮芽孢杆菌': {
                standard_min: [100, 100, 100, 100, 100, 100, 100],
                standard_max: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
                actual_data: [300, 280, 380, 410, 205, 680, 190]
            },
            '沙门氏菌': {
                standard_min: [10, 10, 10, 10, 10, 10, 10],
                standard_max: [100, 100, 100, 100, 100, 100, 100],
                actual_data: [35, 28, 42, 38, 45, 32, 29]
            }
        };

        var days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        var bacteriaNames = Object.keys(bacteriaData);

        // 准备系列数据
        var series = [];
        var legendData = [];

        // 添加通用警戒线 - 使用箭头标注
        series.push({
            name: '通用警戒线',
            type: 'line',
            markLine: {
                silent: true,
                symbol: ['none', 'arrow'], // 添加箭头
                symbolSize: 5, // 箭头大小
                lineStyle: {
                    color: '#fd665f',
                    width: 1,
                    type: 'solid'
                },
                label: {
                    position: 'end',
                    formatter: '{b}', // 显示系列名称
                    color: '#fd665f',
                    distance: [20, 20], // 调整位置
                    backgroundColor: 'rgba(0,0,0,0.7)', // 添加背景色
                    padding: [3, 5] // 增加内边距
                },
                data: [{
                    yAxis: generalWarningLine,
                    name: generalWarningLine + ' CFU/g →', // 添加箭头符号
                    lineStyle: {
                        type: 'solid'
                    }
                }]
            }
        });

        // 添加沙门氏菌专属警戒线 - 使用箭头标注
        series.push({
            name: '沙门氏菌警戒线',
            type: 'line',
            markLine: {
                silent: true,
                symbol: ['none', 'arrow'], // 添加箭头
                symbolSize: 8, // 箭头大小
                lineStyle: {
                    color: '#ff00ff',
                    width: 2,
                    type: 'dashed'
                },
                label: {
                    position: 'start',
                    formatter: '{b}', // 显示系列名称
                    color: '#ff00ff',
                    distance: [20, -20], // 调整位置
                    backgroundColor: 'rgba(0,0,0,0.7)', // 添加背景色
                    padding: [3, 5] // 增加内边距
                },
                data: [{
                    yAxis: salmonellaWarningLine,
                    name: salmonellaWarningLine + ' CFU/g', // 添加箭头符号
                    lineStyle: {
                        type: 'dashed'
                    }
                }]
            }
        });

        // 为每种菌落添加系列
        bacteriaNames.forEach(function (name, index) {
            var color = ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c'][index % 4];

            // 确定当前菌落的警戒线
            var currentWarningLine = (name === '沙门氏菌') ? salmonellaWarningLine : generalWarningLine;

            // 实际检测值 - 添加警报标记点
            var markPointData = [];
            bacteriaData[name].actual_data.forEach(function (value, i) {
                if (value > currentWarningLine) {
                    markPointData.push({
                        name: '警报',
                        coord: [i, value],
                        value: '警报: ' + value + ' CFU/g',
                        itemStyle: {
                            color: (name === '沙门氏菌') ? '#ff00ff' : '#fd665f'
                        }
                    });
                }
            });

            series.push({
                name: name,
                type: 'line',
                data: bacteriaData[name].actual_data,
                lineStyle: {
                    color: color,
                    width: 3
                },
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    color: function (params) {
                        return params.value > currentWarningLine ?
                            ((name === '沙门氏菌') ? '#ff00ff' : '#fd665f') : color;
                    },
                    borderColor: '#fff',
                    borderWidth: 1
                },
                markPoint: {
                    symbol: 'pin',
                    symbolSize: 40,
                    data: markPointData,
                    label: {
                        color: '#fff',
                        fontSize: 10,
                        formatter: function (params) {
                            return params.name;
                        }
                    }
                },
                markLine: {
                    silent: true,
                    data: [{
                        type: 'average',
                        name: '平均值',
                        lineStyle: {
                            color: color,
                            type: 'dashed'
                        },
                        label: {
                            color: color
                        }
                    }]
                }
            });

            legendData.push(name);
        });

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
                formatter: function (params) {
                    var result = params[0].axisValue + '<br/>';

                    params.forEach(function (param) {
                        if (param.seriesName === '通用警戒线' || param.seriesName === '沙门氏菌警戒线') return;

                        var value = param.value;
                        var status = '';
                        var currentWarningLine = (param.seriesName === '沙门氏菌') ? salmonellaWarningLine : generalWarningLine;

                        if (value > currentWarningLine) {
                            status = '<span style="color:' +
                                ((param.seriesName === '沙门氏菌') ? '#ff00ff' : '#fd665f') +
                                '">(超过警戒线)</span>';
                        }

                        result += `
                        <div style="margin:5px 0;">
                            <span style="display:inline-block;width:10px;height:10px;background-color:${param.color};border-radius:50%;margin-right:5px;"></span>
                            ${param.seriesName}: ${value} CFU/g ${status}
                        </div>
                    `;
                    });

                    return result;
                }
            },
            legend: {
                data: legendData.concat(['通用警戒线', '沙门氏菌警戒线']),
                textStyle: {
                    color: 'rgba(255,255,255,.6)'
                },
                right: 10,
                top: 0,
                itemWidth: 12,
                itemHeight: 12
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '12%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: days,
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '菌落数量(CFU/g)',
                nameTextStyle: {
                    color: 'rgba(255,255,255,.6)'
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                        type: 'dashed'
                    }
                },
                max: 1200
            },
            series: series
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

        myChart.on('click', function (params) {
            if (params.name === '警报') {
                console.log("警报点击事件触发");
                showWarningPopup(params);
            }
        });

        function showWarningPopup(params) {
            try {
                var seriesName = params.seriesName;
                var value = params.value;
                var day = days[params.data.coord[0]];
                var currentWarningLine = (seriesName === '沙门氏菌') ? salmonellaWarningLine : generalWarningLine;

                // 显示警报详情容器
                var alertContainer = document.getElementById('alertDetailContainer');
                var alertContent = document.getElementById('alertDetailContent');

                // 填充警报详情内容
                alertContent.innerHTML = `
            <p style="color: #fff; margin: 10px 0;"><strong>菌落名称:</strong>金黄色葡萄球菌</p>
            <p style="color: #fff; margin: 10px 0;"><strong>检测日期:</strong> ${day}</p>
            <p style="color: #fff; margin: 10px 0;"><strong>检测值:</strong> ${value.split(': ')[1]}</p>
            <p style="color: #fff; margin: 10px 0;"><strong>警戒线值:</strong> ${currentWarningLine} CFU/g</p>
            <p style="color: #fd665f; margin: 10px 0;"><strong>状态:</strong> 超过警戒线</p>
        `;

                // 显示警报详情容器
                alertContainer.style.display = 'block';

                // 隐藏地图容器
                document.getElementById('map').style.display = 'none';
            } catch (error) {
                console.error('显示警报详情时出错:', error);
            }
        }

        // 添加关闭函数到全局作用域
        window.closeAlertDetail = function () {
            document.getElementById('alertDetailContainer').style.display = 'none';
            document.getElementById('map').style.display = 'block';
        };

    }
    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        var option = {
            dataset: {
                source: [
                    ['amount', 'bacteria'],
                    [58, 'E.coli'],
                    [78, 'L.monocytogenes'],
                    [41, 'S.epidermidis'],
                    [12, 'S.aureus'],
                    [25, 'Salmonella'],
                    [79, 'Shigella'],
                    [191, 'L.ivanovii']
                ]
            },
            grid: {
                left: '100'
            },
            xAxis: {
                name: 'amount',
                axisLine: {
                    lineStyle: {
                        color: '#ffdb5c'
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#65B581'
                        }
                    }
                }
            },
            yAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#ffdb5c'
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ffbd5c'
                        }
                    }
                }
            },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 0,
                max: 150,
                text: ['High', 'Low'],
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        x: 'amount',
                        y: 'bacteria'
                    },
                    itemStyle: {
                        color: function (params) {
                            // 假设警戒值如下，需要根据实际情况调整
                            var warningValues = {
                                'E.coli': 10,
                                'L.monocytogenes': 80,
                                'S.epidermidis': 100,
                                'S.aureus': 50,
                                'Salmonella': 20,
                                'Shigella': 15,
                                'L.ivanovii': 19
                            };
                            if (params.value > warningValues[params.name]) {
                                return '#FD665F'; // 超过警戒值，标记为红色
                            }
                            return '#446ACF'; // 正常值，标记为蓝色
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        option = {
            // legend: {
            //     orient: 'vertical',
            //     itemWidth: 10,
            //     itemHeight: 10,
            //     textStyle: {
            //         color: 'rgba(255,255,255,.5)'
            //     },
            //     top: '20%',
            //     right: 0,
            //     data: ['E.coli', 'L.monocytogenes', 'S.epidermidis', 'S.aureus', 'Salmonella', 'Shigella', 'L.ivanovii']
            // },
            color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea', '#65B581', '#FFCE34', '#FD665F'],
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            calculable: true,
            series: [
                {
                    type: 'pie',
                    radius: [20, 70],
                    center: ["50%", "40%"],
                    roseType: 'area',
                    data: [
                        { value: 300, name: 'E.coli' },
                        { value: 200, name: 'L.monocytogenes' },
                        { value: 205, name: 'S.epidermidis' },
                        { value: 180, name: 'S.aureus' },
                        { value: 150, name: 'Salmonella' },
                        { value: 220, name: 'Shigella' },
                        { value: 130, name: 'L.ivanovii' },
                    ],
                    label: {
                        normal: {
                            formatter: function (param) {
                                return param.name;
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 5,
                            length2: 15,
                            lineStyle: { width: 1 }
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 30,
                            shadowColor: 'rgba(0, 0, 0, 0.4)'
                        }
                    },
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));
        option = {

            tooltip: {
                trigger: 'axis'
            },
            radar: [{
                indicator: [
                    {
                        text: 'E.coli',
                        max: 15
                    }, {
                        text: 'L.monocytogenes',
                        max: 15
                    }, {
                        text: 'S.epidermidis',
                        max: 15
                    }, {
                        text: 'S.aureus',
                        max: 15
                    }, {
                        text: 'Salmonella',
                        max: 15
                    }
                    , {
                        text: 'Shigella',
                        max: 15
                    }
                    , {
                        text: 'L.ivanovii',
                        max: 15
                    }
                ],
                center: ['50%', '50%'],
                radius: '70%',
                startAngle: 90,
                splitNumber: 4,
                shape: 'circle',
                name: {
                    padding: -5,
                    formatter: '{value}',
                    textStyle: {

                        color: 'rgba(255,255,255,.5)'
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                }
            },],
            series: [{
                name: '每月警戒次数',
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                data: [{
                    name: '1月',
                    value: [5, 3, 2, 7, 4, 6, 6],
                    lineStyle: {
                        normal: {
                            color: '#03b48e',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#03b48e',
                            opacity: 0.4
                        }
                    },
                    symbolSize: 0,

                }, {
                    name: '2月',
                    value: [4, 2, 3, 5, 3, 7, 9],
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            color: '#3893e5',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(19, 173, 255, 0.5)'
                        }
                    }
                },
                {
                    name: '3月',
                    value: [3, 5, 4, 6, 5, 0, 5],
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            color: '#f7931e',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(247, 147, 30, 0.5)'
                        }
                    }
                }]
            },]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
});